<template>
  <div>
    <Header/>
    <div class="flex-border">
      <div>
        <br>
        <el-card class="box-card">
          <h4>注册账号</h4>
          <el-form
            label-width="130px"
            class="demo-ruleForm">
            <el-form-item label="用户名：" >
              <el-input placeholder="请输入账号"/>
            </el-form-item>
            <el-form-item label="设置密码：">
              <span style="float: right;">密码不可少于6位</span>
              <el-input placeholder="请输入密码"/>
            </el-form-item>
            <el-form-item label="确认密码：">
              <el-input placeholder="再次输入密码"/>
            </el-form-item>
            <el-form-item label="企业名称：">
              <el-input/>
            </el-form-item>
            <el-form-item label="贸易身份：">
              <el-input/>
            </el-form-item>
            <el-form-item label="企业所在国/地区：">
              <el-input/>
            </el-form-item>
            <el-form-item label="联系人姓名：">
              <el-input/>
            </el-form-item>
            <el-form-item label="联系人邮箱：">
              <el-input/>
            </el-form-item>
            <el-form-item label="输入验证码：">
              <el-input/>
            </el-form-item>
          </el-form>
          <el-button
            type="warning"
            class="center"
            @click="success">确认注册</el-button>
        </el-card>
        <br>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
import Header from "../frame/loginheader.vue";
import Footer from "../frame/footer.vue";

export default {
    components: {
        Header,
        Footer
    },
    data() {
        return {
            form: {
                region: "",
                username: "",
                password: "",
                code: "",
            }
        }
    },
    methods: {
        success() {
            this.$router.push("/success");
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.flex-border {
  display: flex;
  flex-direction: row;
  min-height: 550px;
  justify-content: space-around;
  border-top: 1px rgb(238, 173, 77) solid;
}
span {
  font-size: 12px;
}
.box-card {
  max-width: 850px;
  margin: auto;
}
.center {
  margin-left: 50%;
  transform: translateX(-50%);
}
.el-input,
.el-select {
  width: 250px;
  margin-right: 12px;
}
</style>
